<template>
  <div @click="returnTop" class="hidden-sm-and-down">
    <img src="@/assets/top.png" alt="回到顶部" id="btnTop" />
  </div>
</template>

<script>
export default {
    mounted() {
        window.addEventListener("scroll", this.scroll, true);
    },
  methods: {
    // 点击按钮，返回顶部
    returnTop() {
      this.$vuetify.goTo(0);
    },
    scroll() {
      //回到顶部判断
      if (
        document.body.scrollTop > 400 ||
        document.documentElement.scrollTop > 400
      ) {
        document.getElementById("btnTop").style.display = "block";
      } else {
        document.getElementById("btnTop").style.display = "none";
      }
    },
  },
};
</script>

<style>
/* return top */
#btnTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  cursor: pointer;
  height: 70px;
  width: 70px;
  opacity: 0.5;
}
#btnTop:hover {
  opacity: 1;
}
</style>
